<template>
	<view class="presenter">
		<!-- <view class="goods_image_box w100">
			<image class="w100 h100" :src="productDetail.image_src" mode=""></image>
		</view> -->
		<view class="" style="width: 750rpx; height: 750rpx">
			<swiper style="width: 750rpx; height: 750rpx; margin: 0 auto" :autoplay="autoplay">
				<swiper-item style="width: 750rpx; height: 750rpx; font-size: 0" v-for="(item, index) in productDetail.images_src" :key="index">
					<image style="width: 750rpx; height: 750rpx" :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods_detail_box w100">
			<view class="flex align-center justify-between">
				<view class="">
					<view class="goods_price mar s48 familytow fblod">
						<text class="s32 familytow fblod" style="color: #ff3f4a">￥</text>
						{{ productDetail.price || 0 }}
					</view>
					<view class="zk_txt mar s26 family f500">选择该产品享{{ productDetail.discount / 10 }}折</view>
				</view>
				<view class="tianjia_box flexjus">
					<view class="jian_box" @click.stop="jianNum">
						<view class="jian_txt"></view>
					</view>
					<view class="num s28 family f500 txtali">
						{{ number }}
					</view>
					<view class="jia_box txtali s40" @click.stop="jiaNum">+</view>
				</view>
			</view>
			<view class="goods_name mar s32 familytow fblod">
				{{ productDetail.name }}
			</view>
		</view>
		<view class="goods_detail_bot">
			<view class="detail_title s28 familytow fblod">商品详情</view>
			<rich-text :nodes="productDetail.detail" class="rich_txt"></rich-text>
		</view>
		<view class="flex justify-center" style="padding: 12rpx 0; width: 100%; position: fixed; bottom: 0">
			<view
				@click="confirm"
				class="flex align-center justify-center"
				style="width: 684rpx; height: 86rpx; background: #ebbe87; border-radius: 43rpx; font-size: 28rpx; color: #ffffff"
			>
				确认
			</view>
		</view>
		<uni-popup ref="lockPopup" type="bottom" :isbottom="true">
			<view class="flex flex-column" style="width: 750rpx; height: 992rpx; background: #ffffff; border-top: 1rpx solid transparent">
				<view class="flex align-end" style="margin-top: -60rpx; margin-bottom: 52rpx">
					<view class="" style="font-size: 0; margin-left: 24rpx; margin-right: 34rpx">
						<image style="width: 208rpx; height: 208rpx; background: #f2f2f2; border-radius: 8rpx" :src="productDetail.sku[index].image_src" mode=""></image>
					</view>
					<view class="flex">
						<view class="flex-1">
							<view class="" style="font-size: 24rpx; color: #e4493a">￥{{ productDetail.price || 0 }}</view>
							<view class="" style="font-size: 24rpx; color: #666; min-width: 360rpx; min-height: 68rpx">【已选】{{ selectItems.join(',') }},数量{{ number }}</view>
						</view>
						<view @click="closePoup" class="" style="font-size: 0; margin: 0 30rpx">
							<image style="width: 32rpx; height: 32rpx" src="@/static/shopping/cha.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex-1" style="overflow-y: scroll">
					<view v-for="(item, indexs) in productDetail.spu" class="" style="padding-left: 20rpx">
						<view class="" style="font-size: 28rpx; color: #333; margin-bottom: 24rpx">
							{{ item.name }}
						</view>
						<view class="flex flex-wrap" style="">
							<view
								v-for="(items, indexss) in handleStr(item.item)"
								@click="selectedSku(indexs, items)"
								:style="selectItems[indexs] == items ? 'background:#EBBE87;color:#fff;' : 'background: rgba(0, 0, 0, 0.1);color:#666;'"
								style="margin-right: 27rpx; margin-bottom: 28rpx; padding: 14rpx 32rpx; font-size: 28rpx; border-radius: 8rpx"
							>
								{{ items }}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="padding-left: 20rpx">
					<view class="" style="font-size: 28rpx; color: #333; margin-bottom: 24rpx">数量</view>
					<view class="tianjia_box flexjus" style="margin-top: 0">
						<view class="jian_box" @click.stop="jianNum">
							<view class="jian_txt"></view>
						</view>
						<view class="num s28 family f500 txtali">
							{{ number }}
						</view>
						<view class="jia_box txtali s40" @click.stop="jiaNum">+</view>
					</view>
				</view>
				<view class="" style="height: 110rpx"></view>
				<view class="flex justify-center" style="padding: 12rpx 0">
					<view
						@click="confirm2"
						class="flex align-center justify-center"
						style="width: 684rpx; height: 86rpx; background: #ebbe87; border-radius: 43rpx; font-size: 28rpx; color: #ffffff"
					>
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import graPhic from '@/components/graphic.vue';
export default {
	components: {
		graPhic
	},
	data() {
		return {
			id: 0,
			productDetail: {},
			number: 0,
			index: 0,
			attrs: {},
			selectItems: [],
			isGift: 0 //1是赠送进来的
		};
	},
	onLoad(options) {
		if (options.isGift) {
			this.isGift = options.isGift;
		}
		this.id = options.id;
		this.number = options.number;
		this.index = options.index;
		this.getDetail();
	},
	methods: {
		handleStr(str) {
			return str.split(',');
		},
		jianNum() {
			if (this.isGift == 1) {
				return;
			}
			if (this.number <= 0) {
				return;
			}
			this.number--;
		},
		jiaNum() {
			if (this.isGift == 1) {
				return;
			}
			this.number++;
		},
		confirm() {
			if (this.isGift == 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				this.$refs.lockPopup.open();
			}
		},
		confirm2() {
			this.closePoup();
		},
		closePoup() {
			this.$refs.lockPopup.close();
		},
		getDetail() {
			this.$request({
				url: 'package/getProductDetail',
				data: {
					id: this.id
				}
			}).then((res) => {
				res.data.data.detail = res.data.data.detail.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
					var img = `<img style="display: block; width: 100%;" src="${capture}">`;
					return img;
				});
				for (let i = 0; i < res.data.data.spu.length; i++) {
					this.selectItems[i] = res.data.data.spu[i].item.split(',')[0];
				}
				this.productDetail = res.data.data;
			});
		},
		getPrice(priceList) {
			let nowSpc = this.selectItems.join(',');
			let priceArr = priceList.filter((item) => item.difference == nowSpc);
			return priceArr[0].price;
		},
		// 选择规格
		selectedSku(index1, e) {
			this.selectItems[index1] = e;
			this.productDetail.price = this.getPrice(this.productDetail.sku);
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
// 数量加减按钮
.tianjia_box {
	width: 150upx;
	height: 36upx;
	border: 2upx solid #ebbe87;
	margin-top: 30upx;
	margin-right: 32rpx;
	.jian_box {
		width: 36upx;
		height: 36upx;
		background: #ebbe87;
		margin: 0;
		padding: 0;

		.jian_txt {
			width: 20upx;
			height: 4upx;
			background: #ffffff;
			margin: 50% auto;
		}
	}

	.num {
		line-height: 36upx;
	}

	.jia_box {
		width: 36upx;
		height: 36upx;
		background: #ebbe87;
		line-height: 32upx;
		color: #ffffff;
	}
}

.presenter {
	overflow: hidden;

	.goods_image_box {
		height: 750upx;
		background-color: #666;
	}

	.goods_detail_box {
		height: 230upx;
		background: #fff;
		overflow: hidden;

		.mar {
			margin-left: 32upx;
		}

		.goods_price {
			color: #ff3f4a;
			margin-top: 38upx;
		}

		.zk_txt {
			color: #666;
			margin-top: 10upx;
		}

		.goods_name {
			width: 684upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #000000;
			margin-top: 18upx;
		}
	}

	.goods_detail_bot {
		background-color: #fff;
		margin-top: 12upx;
		overflow: hidden;

		.detail_title {
			color: #333;
			margin-top: 30upx;
			margin-left: 32upx;
			padding-bottom: 28upx;
		}

		.rich_txt {
			width: 100%;
		}
	}
}
</style>
<style>
page {
	background: #f4f4f4;
}
</style>
